<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>在线支付</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    @include('public.h5_head')
    <link rel="stylesheet" type="text/css" href="{{ env('CDN_DOMAIN_NAME') }}/css/commoncss/common.css"/>
    <link rel="stylesheet" type="text/css" href="{{ env('CDN_DOMAIN_NAME') }}/css/payment.css"/>
    <script src="{{ env('CDN_DOMAIN_NAME') }}/js/commonjs/rem.js"></script>
</head>
<script src="{{ env('CDN_DOMAIN_NAME') }}/js/app.js"></script>
<script>
    function p(n) {
        return n < 10 ? '0'+ n : n;
    }
    var repaytime = '{{ strtotime($orderInfos->repay_at)}}';
//    var pro_id = '{{ $orderInfos->pro_id }}';
//    if(pro_id == 33)
//    {
{{--        var endTime = '{{ strtotime($orderInfos->created_at) + 24*60*60 }}';--}}
    {{--}else{--}}
        var endTime = '{{ strtotime($orderInfos->created_at) + 10*60 }}';
    {{--}--}}


    if(repaytime.length>0)
    {
        endTime = parseInt(repaytime)+30*60;

    }
    function getTime(n) {
        var nowTime = '{{ time() }}';
        var countDown = (endTime - nowTime);
        if(countDown < 0)
        {
            return '00';
        }
        if(n == 'h')
        {
            var val = parseInt(countDown/(60*60)%24);
        }else if(n == 'm')
        {
            var val = parseInt(countDown/60%60);
        }else if( n == 's')
        {
            var val = parseInt(countDown%60);
        }
        return p(val);
    }
</script>
<body>
<div id="payment">
    <div class="payment_tit">在线支付</div>
    <div class="payment_time">
        <p class="payment_txt">剩余支付时间</p>
        <p class="payment_surplus"><span class="order_time time_h"><script>document.write(getTime('h'));</script></span>:<span class="order_time time_m"><script>document.write(getTime('m'));</script></span>:<span class="order_time time_s"><script>document.write(getTime('s'));</script></span></p>
        <div class="payment_detail">
            <ul class="payment_ul">
                <li class="payment_li">
                    <p class="payment_p1">{{ $pro->brand }}</p>
                    <p class="payment_p2">(</p>
                    <p class="payment_p3">{{ $pro->title }}</p>
                    <p class="payment_p4">)</p>
                </li>
                <li class="payment_li details">详情</li>
                <li class="payment_li">￥
                    @if($orderInfos->is_owe == 1)
                        {{ sprintf("%.2f",$orderInfos->downpayment+ $orderInfos->postage_estimate) }}
                    @else
                        {{ sprintf("%.2f",$orderInfos->total_price + $orderInfos->postage_estimate) }}
                    @endif
                </li>
            </ul>
        </div>
    </div>
    <div class="payment_tit2">支付方式</div>
    <div class="payment_pic">
        <div class="payment_div1"></div>
        <div class="payment_div2">支付宝</div>
    </div>
    <div class="payment_btn">
        <div class="payment_sure user_pay">确认支付￥
            @if($orderInfos->is_owe == 1)
                {{ sprintf("%.2f",$orderInfos->downpayment+ $orderInfos->postage_estimate) }}
                @else
                {{ sprintf("%.2f",$orderInfos->total_price+ $orderInfos->postage_estimate) }}
            @endif
        </div>
    </div>
    <div class="mask" style="display:none;"></div>
    <div class="maskDiv" style="display:none;">
        <div class="mask_tit">{{ $pro->brand }}({{ $pro->title }})</div>
        <div class="mask_hint">
            <p style="width:34.93%;height:1px;background:#555;margin-top:0.5975rem;"></p>
            <p style="width:30.14%;height:1.195rem;line-height:1.195rem;border:1px solid #555;text-align:center;color:#fff;font-size:0.597rem;border-radius:0.555rem;box-sizing:border-box;">订单详情</p>
            <p style="width:34.93%;height:1px;background:#555;float:right;margin-top:0.5975rem;"></p>
        </div>
        <ul class="mask_ul">
            <li class="mask_li">
                <span class="mask_sp1">{{ $orderInfos->addressee_name }}</span>
                <span class="mask_sp2">{{ $orderInfos->addressee_tel }}</span>
            </li>
            <li class="mask_li">{{$orderInfos->addressee_place }}</li>
            <li class="mask_li">
				<span class="mask_sp3">款号：{{ $orderInfos->girard }}</span>
			</li>
            <li class="mask_li">
                <span class="mask_sp1">颜色：{{ $orderInfos->color }}</span>
                <span class="mask_sp2">×{{ $orderInfos->num }}/<i>手</i></span>
            </li>
        </ul>
        <div class="mask_hide">
            <img src="/img/close.png" alt="" />
        </div>
    </div>
</div>

</body>
<script>
    $(".details").click(function(){
        $(".mask").show();
        $(".maskDiv").show();
    })
    $(".mask_hide").click(function(){
        $(".mask").hide();
        $(".maskDiv").hide();
    });
    var times = '{{ time() }}';
    function newTime(times) {
        var nowTime = times;
        var countDown = (endTime - nowTime);
        if(countDown < 0)
        {
            $('.order_time').css('color','red');
            $('.payment_btn').html("<div class='payment_sure'>确认支付￥{{ $orderInfos->total_price }}</div>");
            $('.payment_sure').css('background','#ccc');
            return false;
        }
        //获取小时
        var oHours = parseInt(countDown/(60*60)%24);
        //获取分钟
        var oMinutes = parseInt(countDown/60%60);
        //获取秒
        var oSeconds = parseInt(countDown%60);
        $('.time_h').text(p(oHours));
        $('.time_m').text(p(oMinutes));
        $('.time_s').text(p(oSeconds));
        setTimeout(function(){

            newTime(parseInt(nowTime)+ 1)
        },1000)
    }
    newTime(times)
    $('.user_pay').click(function () {
        window.location.href = '/alipay/index?ordernum={{ $orderInfos->ordernum }}&subject={{ $pro->title }}';
    })
</script>
</html>

